<template>
	<view class="bg">
		<view class="container">
			<view class="userProfile">
				<image class="portrait" :src="userProfile.avatar || '@/static/images/index/default-portrait@2x.png'"
					mode="aspectFill">
					<text class="nickname">{{ userProfile.nickname }}</text>
					<image v-if="userProfile.vipTypeId" class="icon-member-level"
						:src='`../../static/images/index/icon-member-leve${userProfile.vipTypeId}@2x.png`'
						mode="aspectFill">
					</image>
			</view>

			<view class="recharge-num">
				<image class="recharge-bg" src="../../static/images/index/recharge-bg@2x.png" mode="aspectFill"></image>
				<view class="recharge-num-balance">
					<view class="label">当前余额</view>
					<view class="value">
						<view class="text">{{ userAsset.balance }}</view>
						<view class="unit">元</view>
					</view>
				</view>
			</view>
			<view class="recharge-list">
				<view class="title">
					<view class="label">充值金额</view>
					<view class="desc">该充值活动可用于汽油92#和95#</view>
				</view>
				<div class="recharge-list-box">
					<view class="recharge-item" v-for="(item ,index) in rechargeList" :key="index"
						@click.native="handleRecharge(item)"
						:class="{'active':rechargeItem.productId === item.productId}">
						<image class="recharge-item-bg" v-show="rechargeItem.productId !== item.productId"
							src="../../static/images/index/racharge-item-bg.png" mode="aspectFill"></image>
						<image class="recharge-item-bg" v-show="rechargeItem.productId === item.productId"
							src="../../static/images/index/racharge-item-bg-active.png" mode="aspectFill"></image>
						<view class="recharge-item-box">
							<view class="price">{{item.price}}{{item.buyUnit}}</view>
							<view class="total">{{item.shopRemark}}</view>
						</view>
					</view>
				</div>
			</view>

			<!-- <uni-grid :column="3">
				<uni-grid-item v-for="(item ,index) in rechargeList" :key="index"
					@click.native="handleRecharge(item)">
					<view :class="{'recharge-item':rechargeItem === item.productId}">
						<view class="price">
							{{item.price}}{{item.buyUnit}}
						</view>
						<view class="total">
							赠送{{item.stock}}积分
						</view>
					</view>
				</uni-grid-item>
			</uni-grid> -->
			<!-- <button type="default" @click="fetchRecharge">立即充值</button> -->
		</view>

		<view class="racharge-bg" @click="fetchRecharge">
			<image class="btn" src="../../static/images/index/racharge-bg.png" mode="aspectFill"></image>
			<view class="text">
				立即充值
				 <text class="tips" v-if="rechargeItem"> 
				 ({{rechargeItem.price}}{{rechargeItem.buyUnit}}{{rechargeItem.shopRemark ? `,${rechargeItem.shopRemark}` : ''}})
				 </text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberProfile,
		memberAsset
	} from '@/api/member.js';
	import {
		productSearchRechargeList
	} from '@/api/product.js';
	import {
		rechargeOrderCreate
	} from '@/api/recharge-order.js';

	export default {
		data() {
			return {
				rechargeItem: null,
				userProfile: {},
				userAsset: {},
				rechargeList: []
			};
		},
		onShow() {
			const token = uni.getStorageInfoSync('token');
			if (token) {
				this.fetchMemberProfile(token);
				this.getMemberAsset();
				this.getProductSearchRechargeList();
			}
			wx.getSetting({
				success(res) {
					console.log(res.authSetting)
					// res.authSetting = {
					//   "scope.userInfo": true,
					//   "scope.userLocation": true
					// }
				}
			})
		},
		methods: {
			// 获取会员档案
			fetchMemberProfile(res) {
				memberProfile(res).then(res => {
					this.userProfile = res.data;
				});
			},
			// 获取会员资产
			getMemberAsset() {
				memberAsset().then(res => {
					this.userAsset = res.data;
				});
			},
			// 获取充值列表
			getProductSearchRechargeList() {
				productSearchRechargeList().then(res => {
					this.rechargeList = res.rows;
				});
			},
			// 选择充值请求
			handleRecharge(item) {
				this.rechargeItem = item;
				uni.requestSubscribeMessage({
					tmplIds: ['3uMH-imFBoCuECmhm9owkKgbBk7X7ekXBMNp4hMzEOg', '1Ff_-DzvHZmgDbQsU4SzufDtbE0-SF_3GxdgdG9xPow', 'UjwqOCy0B73LMe3Hb8AsKjGgY4EKtVEvDo4lgFDzsDM'],
					success(res) {
						console.log(res);
					}
				})
			},
			// 执行充值
			fetchRecharge() {
				this.$modal.loading("充值处理中...", true)
				if (this.rechargeItem && this.rechargeItem.productId) {
					const data = {
						productId: this.rechargeItem.productId
					};
					rechargeOrderCreate(data).then(res => {
						this.$modal.closeLoading()
						uni.requestPayment({
							provider: 'wxpay',
							...res.data,
							success: (res) => {
								this.$modal.msgSuccess("充值成功");
								// this.$tab.navigateTo('/pages/mine/order/detail');
							},
							fail: (e) => {
								this.handlePayError()
								console.log(e);
							}
						})
					}).catch(val => {
						this.handlePayError()
						console.log(val);
					})
				} else {
					uni.showToast({
						title: '请选择充值金额',
						icon: 'none'
					});
				}
			},
			// 支付失败提示
			handlePayError() {
				uni.showModal({
					title: '支付失败',
					content: '支付遇到问题，请尝试重新支付',
					showCancel: false,
					// cancelText: '返回订单',
					confirmText: '重新支付',
					// cancelColor: '##000000',
					confirmColor: '#1E60FF',
					icon: 'fail',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确认');
						} else if (res.cancel) {
							console.log('用户点击取消');
							// this.$tab.navigateTo("/pages/mine/order/detail");
						}
					},
				})
			},
			// 重置
			// reSetDate(){
			//   this.rechargeItem = null
			//   this.userProfile = {}
			//   this.userAsset = {}
			//   this.rechargeList = []
			// }
		}
	};
</script>

<style lang="scss">
	.bg {
		min-height: 100vh;
		background: $uni-page-bg;
	}

	.container {
		padding: 24rpx;
		padding-top: 4px;
		line-height: inherit;
		background: linear-gradient(180deg, #1e60ff 0%, rgba(30, 96, 255, 0) 100%);
		background-size: 100% 416rpx;
		background-repeat: no-repeat;
		width: 100%;
		background-attachment: fixed;

		.userProfile {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 32rpx;

			.portrait {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.nickname {
				margin: 0 16rpx;
				font-size: 36rpx;
				font-family: PingFang-SC-Heavy, PingFang-SC;
				font-weight: 800;
				color: #ffffff;
				line-height: 1;
			}

			.icon-member-level {
				width: 180rpx;
				height: 36rpx;
			}
		}

		.recharge-num {
			position: relative;
			width: 702rpx;
			height: 136rpx;
			box-sizing: border-box;

			.recharge-bg {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				display: block;
				width: 100%;
				height: 100%;
			}

			&-balance {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;
				padding: 0 40rpx;

				.label {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					line-height: 1;
				}

				.value {
					display: flex;
					align-items: center;

					.text {
						margin-right: 8rpx;
						font-size: 64rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #ff403c;
						line-height: 1;
					}

					.unit {
						font-size: 28rpx;
						font-family: PingFang-SC-Heavy, PingFang-SC;
						font-weight: 800;
						color: #ff403c;
					}
				}
			}
		}

		.recharge-list {
			padding: 32rpx 24rpx;
			width: 702rpx;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
			border-radius: 0rpx 0rpx 24rpx 24rpx;

			.title {
				margin-top: 16rpx;
				display: flex;
				align-items: center;

				.label {
					margin-right: 16rpx;
					font-size: 36rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #111111;
				}

				.desc {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			&-box {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.recharge-item {
					width: 206rpx;
					height: 128rpx;
					margin-top: 24rpx;
					margin-right: 18rpx;
					position: relative;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					&.active {
						color: #1E60FF;

						.price,
						.total {
							color: #1E60FF;
						}
					}

					&:nth-child(3n) {
						margin-right: 0;
					}

					.recharge-item-bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}

					&-box {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						width: 206rpx;
						height: 128rpx;
						z-index: 9;

						.price {
							font-size: 40rpx;
							font-family: PingFang-SC-Heavy, PingFang-SC;
							font-weight: 800;
							color: #111111;
							line-height: 1;
						}

						.total {
							margin-top: 8rpx;
							font-size: 27rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #ff403c;
						}
					}
				}
			}
		}
	}

	.racharge-bg {
		position: relative;
		width: 750rpx;
		height: 240rpx;

		.btn {
			width: 750rpx;
			height: 240rpx;
		}

		.text {
			width: 750rpx;
			height: 240rpx;
			padding-top: 51rpx;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			font-size: 48rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #ffffff;
			line-height: 1;
			.tips{
				font-size: 40rpx;
			}
		}
	}
</style>
